<template>
  <div>
    <footer class="footer">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"
        >剩余<strong>{{ residue }}</strong></span
      >
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a
            @click="$emit('changeFlag', 'all')"
            :class="{ selected: flag === 'all' }"
            href="#/"
            >全部任务</a
          >
        </li>
        <li>
          <a
            @click="$emit('changeFlag', 'active')"
            :class="{ selected: flag === 'active' }"
            href="#/active"
            >进行中</a
          >
        </li>
        <li>
          <a
            @click="$emit('changeFlag', 'completed')"
            :class="{ selected: flag === 'completed' }"
            href="#/completed"
            >已完成</a
          >
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="$emit('clearCompleted')">
        清除已完成
      </button>
    </footer>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    residue: Number,
    flag: String,
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped lang="less"></style>
